<template>
	<view class="container">
		<view class="header" :style="{'padding-top':Height}">
		 <view class="img">
		 	<image
		 	  @click="back"
		 	  src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_back.png"
		 	  mode=""
		 	></image>
		 </view>
		  <input
		    type="text"
		    placeholder="查找你感兴趣的话题"
		    v-model="keywords"
			@input="search"
		  />
		</view>
		<view class="recommend" :style="{'margin-top':Height}" v-if="list.length>0">
			<template v-for="item in list">
			  <view class="recommend-item" :key="item.id" @click="go_goods_detail(item.id)">
				<view class="img" v-show="item.goods_images.length>0">
					<image :src="item.goods_images[0]" mode=""></image>
				</view>
				<view class="name">
				  {{ item.goods_name }}
				</view>
				<view class="bottom">
				  <view class="price"> ￥ {{ item.goods_price }} </view>
				  <view class="type">
					{{ item.type_text }}
				  </view>
				</view>
			  </view>
			</template>
		</view>
		<!--   -->
		<view class="nodata" v-else>
			<image
			src="https://community.chuangxiangdianli.com/images/empty/nodata.png" mode=""></image>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	// 引入封装的请求
	import request from '@/utils/request.js'	
	export default {
		data(){
			return {
				keywords:'',
				// 商品列表
				list:[],
				// 当前页码
				pageNo:1,
				// 列表个数 
				limit:10,
				// 是否正在请求数据
				is_loading:false,
				// 是否请求完数据
				is_bottom:false,
				// 底部正在加载中
				status: 'loadmore',
				Height:'25px'
			}
		},
		onLoad() {
			let Height = uni.getSystemInfoSync().statusBarHeight
			this.Height = Height + 'px'
		},
		onShow() {
			this.get_goods_list()
		},
		// 页面底部加载
		onReachBottom(){
			let that = this
			this.status = 'loading';
			// console.log(11111)
			if(that.status = 'nomore' || that.is_loading){
				return false
			}
			this.pageNo++
			setTimeout(() => {
				that.get_goods_list(true)
			}, 1000)
		},
		methods:{
			// 返回上一页
			back() {
			  uni.navigateBack();
			},
			search(){
				this.get_goods_list()
			},
			// 获取商品列表
			get_goods_list(turn){
				let that = this
				that.is_loading = true
				request.get('wechat/getFleaGoods',{
					type:1,
					page:that.pageNo,
					pre_page:that.limit,
					keywords:that.keywords,
					cate_id:''
				}).then(res=>{
					// console.log('首页数据', res)
					that.is_loading = false
					if (res.code==200) {
						if(turn){
							if(res.data.data.length>0){
								that.list = [
									...that.list,
									...res.data.data
								]
							}
						}else{
							that.list = res.data.data
						}
						if(res.data.total==that.list.length){
							// that.is_boottom = true
							that.status = 'nomore';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.header {
		  width: 100%;
		  // height: 82rpx;
		  display: flex;
		  align-items: center;
		  box-sizing: border-box;
		  padding-left: 17rpx;
		  background-color: #ffffff;
			position: fixed;
			z-index: 999;
			top: 0;
			left: 0;
		  &>view{
				width: 50rpx;
				height: 60rpx;
				display: flex;
				align-items:center;
				justify-content: center;
				margin-right: 42rpx;
				image {
				  width: 34rpx;
				  height: 34rpx;
				}
			}
		  input {
		    width: 380rpx;
		    height: 60rpx;
		    background: #ededed;
		    border-radius: 30rpx;
		    text-align: center;
		  }
		}
		.nodata{
			width: 100%;
			display: flex;
			justify-content: center;
			&>image{
				width: 400rpx;
				height: 400rpx;
			}
		}
		.recommend{
			height: auto!important;
			margin-top: 15rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			box-sizing: border-box;
			padding: 0 22rpx;
			 padding-top: 80rpx;
			.recommend-item {
			  width: 340rpx;
			  padding-bottom: 17rpx;
			  border-radius: 10px;
			  background-color: #ffffff;
			  margin-right: 22rpx;
			  margin-bottom: 30rpx;
			  &:nth-child(2n) {
				margin-right: 0;
			  }
			  .img {
				width: 340rpx;
				height: 360rpx;
			  }
			  .name {
				width: 100%;
				padding: 0 9rpx;
				box-sizing: border-box;
				margin-top: 18rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				height: 78rpx;
			  }
			  .bottom {
				width: 100%;
				padding: 0 9rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price {
				  font-size: 30rpx;
				  font-family: Hiragino Sans GB;
				  font-weight: bold;
				  color: #b83d42;
				}
				.type {
				  min-width: 83rpx;
				  height: 27rpx;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  background: #333333;
				  border-radius: 3rpx;
				  font-size: 18rpx;
				  font-family: Hiragino Sans GB;
				  font-weight: bold;
				  color: #fefefe;
				}
			  }
			}
		}
		
	}
</style>
